<template>
    <div>
        <div id="allmap"></div>
    </div>
</template>

<script>
export default {
  props: ["mapDataA"],
  
 data(){
   return{
     itemData:{
        Sint:'',
        Sant:'',
        Dint:'',
        Dant:''
     },
   }
 },
  created(){
  },
 mounted(){
 
  this.allmapA()
 },
 methods:{
   allmapA(){
    var map = new BMap.Map("allmap");
      map.centerAndZoom(new BMap.Point(108.37, 22.82), 11);
      map.enableScrollWheelZoom(true);

      var mapData = Number(this.mapDataA.Sint) 
      var mapDataA = Number(this.mapDataA.Sant) 
      var p1 = new BMap.Point(mapData,mapDataA);

      var mapDataLng = Number(this.mapDataA.Dint)
      var mapDataLat = Number(this.mapDataA.Dant)

      var p2 = new BMap.Point(mapDataLng,mapDataLat);
      var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
      driving.search(p1, p2); 
   }
 }
  
}
</script>
<style>
#allmap{
  width: 100%;
  height: 100%;
}
</style>
